<template>
  <div >
    <Modal v-model="beforeLoginShow" draggable scrollable title="登录前提示">
      <p slot="header" class="modalHeader">
        <span style="margin-left: 5px">会话超时提示</span>
      </p>
      <CButtonClose slot="close" @click="close" />
      <div class="modalBody">
        <div>由于长时间未进行操作，会话将在{{ seconds }}秒后超时。</div>
        <div>是否继续本次操作？</div>
      </div>
      <template #footer class="footerBtns">
        <CButton
          class="continue system-btn-style"
          color="info"
          @click="continueOperation"
          >继续操作</CButton
        >
        <CButton class="cancel-btn" color="info" @click="exit"
          >登出系统</CButton
        >
      </template>
    </Modal>

    <Modal v-model="isShowTwo" draggable scrollable>
      <p slot="header" class="modalHeader">您登录已超时,请先登录</p>
      <CButtonClose slot="close" @click="close" />
      <div class="modalBody">
        <CRow style="margin-left: 15%">
          <CInput
            class="loginInput"
            v-model="username"
            placeholder="用户名"
            autocomplete="username email"
          >
            <template #prepend-content>
              <CIcon name="cil-user" />
            </template>
          </CInput>
        </CRow>
        <CRow style="margin-left: 15%">
          <CInput
            class="loginInput"
            v-model="pwd"
            placeholder="密码"
            type="password"
            autocomplete="curent-password"
            @keyup.enter="enter"
          >
            <template #prepend-content>
              <CIcon name="cil-lock-locked" />
            </template>
          </CInput>
        </CRow>
      </div>
      <template #footer class="footerBtns">
        <CRow style="margin-left: 20%">
          <CButton
            class="loginInput system-btn-style"
            color="info"
            @click="login"
            >登 录</CButton
          >
        </CRow>
      </template>
    </Modal>
  </div>
</template>
<script>
export default {
  props: ["isShow"],
  data() {
    return {
      seconds: 60,
      username: "",
      pwd: "",
      isShowTwo: false,
      beforeLoginShow: this.isShow,
      setIntervalTime: "",
    };
  },
  watch: {
    isShow:{
      handler(val) {

        this.beforeLoginShow = val;
        this.seconds = 60;
      },
    },
  },
  mounted() {
    let that = this;
    this.setIntervalTime = setInterval(() => {
      if (that.seconds > 0 && that.seconds <= 60) {
        that.seconds--;
      } else {
        if (that.isShow) that.isShowTwo = true;
      }
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.setIntervalTime);
  },

  methods: {
    close() {
      let _this = this;
      let path = _this.$api.homeLoginOthers.logout;
      this.http
        .get(path)
        .then((res) => {
          //移除当前用户登录信息
          _this.$emit("update:isShow", false);
          _this.isShowTwo = false;

          _this.$store.dispatch("removeRoute");
          _this.$store.dispatch("logout").then(() => {
            _this.$router.push({ path: "/pages/login" });
          });
        })
        .catch((err) => {});
    },
  async continueOperation() {
      let data = await this.http.get(this.$api.homeLoginOthers.refreshInvalidToken);
      if (data.data&&data.data.data) {
        window.sessionStorage.setItem("PIECloud-Token", data.data.data);
        let currentTime = new Date().getTime();
        $(".c-app").css("filter", "");
        this.$emit("update:isShow", false);
        this.$emit("getCurrentTime",currentTime)
      }else {
        this.$Message.error("刷新失败，请重新登录！")
        this.$router.push({ path: "/pages/login" });
      }
    },
    exit() {
      let _this = this;
      _this.$emit("update:isShow", false);
      _this.$router.push({ path: "/pages/login" });
    },
    login() {
      let _this = this;
      let path = _this.$api.homeLoginOthers.login;
      let proPath = _this.$api.homeLoginOthers.checkVisit + "/" + 9;
      let params = {
        username: _this.username,
        password: _this.$md5(_this.pwd),
        // isMd5: true,
        encrypt: true,
        systemId: systemId,
      };
      _this.http
        .get(path, params)
        .then((res) => {
          if (res.data.success) {
            _this.isShowTwo = false;
            _this.$emit("update:isShow", false); //向父组件传递消息修改值
            $(".c-app").css("filter", "");
            _this.saveUserInfoSTHX(res.data.data);
          } else {
            _this.$Message.error(res.data.message);
          }
        })
        .catch((err) => {});
    },

    saveUserInfoSTHX(result) {
      let user = {
        userName: result.userData.userName,
        userId: result.userData.userId,
        token: result.token,
        department: result.userData.organizationName,
        nickName: result.userData.nickName,
        roleName: result.userData.roleName,
      };
      this.$store.dispatch("login", user); //将user保存到store中
    },
    enter() {
      let _this = this;
      document.onkeydown = function (event) {
        let e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) {
          _this.login();
        }
      };
    },
  },
};
</script>

<style>
.loginInput {
  width: 300px;
}
.continue {
  width: 122px;
}
 
</style>
